2025 年的 iThome 鐵人賽「佛心分享-SideProject30」組別中，我以 《用 GenAI 創造虛擬 Tutting 舞者的 30 天冒險》文章連結 為題，開啟了一段將街舞幾何藝術（Tutting）數位化的旅程～～～

到2026年，我一直在思考怎麼讓這套工具變得更好用，真的能夠用來分析、練習與教學，成為一套真正的工具而不是玩具。

因此，在邁向複雜的三維空間之前，我決定拿當年的創作熱情來做個重構實驗——不靠任何第三方函式庫，純粹利用原生 HTML5 Canvas + Vanilla JS，把所有的畫布渲染、數學計算與時間軸，全部塞進單一 .html 檔案裡！

DAY2 的目標很明確：Vibe coding 一個專為 Tutting 舞者設計的 2D Tutting 模擬器！

用自然語言下Prompt進行開發

這次實驗透過不斷反覆迭代 Prompt（提示詞），讓 AI 當我的工程師，一步步把複雜的程式撰寫出來！為了搞定七頭身比例、幾何吸附與幾何解算，我經歷了無數次「提示、測試、微調、再提示」的迭代過程：

• 第 1~3 次 Prompt 迭代：虛擬舞者的比例與繪圖對齊
• 第 4~7 次 Prompt 迭代：雙模式互動系統 FK / IK
• 第 8~12 次 Prompt 迭代：角度吸附機制
• 第 13~16 次 Prompt 迭代：發現Bug持續修正
  ......透過不斷的迭代與測試總算將所有功能齊全!

2D Tutting 模擬器四大核心亮點

透過 Prompt 不斷精煉，最終在這個單一 HTML 檔案中實現了四個專為 Tutting舞者們設計的實用功能：

• FK / IK 雙模式切換：要單獨調整手肘角度就用 FK，要直接抓著手腕擺出方框就切換成 IK。
• 直角吸附：接近 0°、45°、90°、135°、180° 時瞬間自動吸附。
• Time-based LERP 平滑時間軸：記錄多個姿勢影格，按下播放即刻以時間差平滑過渡連招，完全解決關節反向自轉的 Bug。
• 單一 .html 檔零依賴：不用安裝任何套件、不用開伺服器，檔案點開就能立刻開始編舞！

結語

再次拿這個專案做實驗，讓我深深體會到「Vibe coding」的強大威力。不用像過往傳統開發一樣，撰寫複雜的數學公式與演算法，只要清楚知道需求是什麼，透過不斷調整 Prompt 的條件與限制，就能引導 AI 一步步刻劃出精準的成果！！！ 2D Tutting 模擬器一瞬間完成！

明天見～～～

文章的最後，提供本文實驗的2D Tutting 模擬器 Prompt 給大家參考：

# Prompt：2D 幾何 Tutting 舞蹈模擬器（七頭身站姿專業版）

## 專案目標
建立一個**單一網頁檔案（Single HTML File）**的極簡主義風格 Tutting 舞蹈火柴人模擬器，供 Tutting 街舞愛好者與空間幾何視覺設計師進行編舞、方框疊加（Box Folding）與動作練習。

**技術限制**：僅使用原生 HTML5 Canvas、CSS3、Vanilla JavaScript，**不得**引入任何第三方函式庫（Three.js、p5.js、GSAP、外部 IK 庫等）。所有 HTML、CSS、JS 需整合於同一份 `.html` 檔案。

---

## 1. 視覺與 UI/UX

| 項目 | 規格 |
|---|---|
| 背景色 | `#08080a`（極深色） |
| 主骨架線條 | `#ffffff`（純白） |
| 控制點 / 狀態提示 | `#00ffcc`（螢光青綠） |
| 基準十字線 | `#111116`，畫布中央水平垂直交叉 |

**行動端手勢優化**
- RWD 上下佈局：上方畫布、下方控制面板
- 按鈕觸控區域 ≥ 44×44px（建議高度 48px），需有 `:active` 觸控變色反饋
- 關節點觸控命中半徑（Hit Test Radius）擴大至 **26px**，避免誤觸

---

## 2. 七頭身黃金幾何比例（單位：px）

頭高 30px（半徑 15px），總身高 = 7 × 頭高 = 210px。

| 部位 | 長度 | 說明 |
|---|---|---|
| HEAD_RADIUS | 15 | 空心圓 |
| NECK_LEN | 10 | |
| TORSO | 60 | 軀幹/脊椎 |
| SHOULDER | 26 | 單側肩寬（窄肩設計） |
| HIP_WIDTH | 18 | 單側髖寬 |
| UPPER_ARM | 50 | 大臂 |
| FOREARM | 50 | 前臂，與大臂 1:1 對稱 |
| HAND | 20 | 自然下垂時指尖落在大腿中段 |
| THIGH | 55 | 大腿 |
| CALF | 55 | 小腿，與大腿 1:1 對稱 |
| FOOT | 20 | |

---

## 3. 開局初始姿勢

**下半身**：雙腿髖關節垂直向下（90°），膝關節打直（相對角度 0°），雙腳自然水平貼地。

**上半身**：
- 左臂：肩膀 180°、手肘 −90°、手腕 90°
- 右臂：肩膀 0°、手肘 90°、手腕 −90°

**錨點**：角色物理中心（骨盆）需垂直修正，確保七頭身角色在任何解析度下皆完美居中、不被底部面板遮擋。

---

## 4. 雙模式互動系統：FK / IK

需提供明顯的「FK 模式」與「IK 模式」切換開關。

### FK（正向運動學）
- 可獨立點擊拖曳全身 12 個核心關節：
  - 手臂鏈：肩膀 → 手肘 → 手腕 → 手掌
  - 腿部鏈：髖部 → 膝蓋 → 腳踝 → 腳掌
- 拖曳單一關節僅改變其相對於父階層的角度，子關節隨之連動旋轉

### IK（反向運動學）
- 手臂鏈：肩膀為固定基底，手腕/手掌為末端效應器
- 腿部鏈：髖部為固定基底，腳踝/腳掌為末端效應器
- **演算法**：FABRIK（Forward And Backward Reaching IK），2D 兩節骨骼反向解算
- 拖曳手腕/腳踝時，自動回算大臂/前臂（或大腿/小腿）角度，實現末端追隨
- **邊界安全鎖**：觸控點超出最大伸展範圍時，骨骼鎖定在朝向目標的最大直線路徑上，禁止拉伸分離或脫臼

---

## 5. 角度吸附機制（Angle Snapping）

無論 FK 或 IK 模式，當任一關節的角度接近 `0° / 45° / 90° / 135° / 180° / 225° / 270° / 315°`（容許誤差 ±5°）時：

- 自動吸附至精準角度
- 觸發吸附的關節點由白色轉為 `#00ffcc` 並擴大半徑閃爍
- 頂部狀態列 `SNAP` 顯示同步切換為亮綠色 `TRIGGERED`

---

## 6. 影格紀錄與 LERP 動畫時間軸引擎

**資料結構**：時間軸統一儲存各關節的**最終相對角度**，確保 FK / IK 產生的姿勢皆能以相同格式記錄。

**時間軸 UI**
- ▶ 播放 / ⏸ 暫停
- ＋ 新增影格
- 🗑 刪除目前影格
- ✕ 清除全部
- 動態生成可點擊跳轉的影格節點

**Time-based LERP 動畫引擎**
- 播放需以時間差（Delta Time）平滑過渡，不受 FPS 波動影響
- **臨界點優化**：使用 `Math.cos` / `Math.sin` 處理角度差值，避免跨越 ±180° 邊界時發生原地瘋狂自轉的 Bug
- 動畫循環播放（Loop）
- 非播放且未拖曳狀態下，手動切換影格時需平滑內插過渡至該姿態

---

## 7. 交付格式與程式碼品質

- 單一完整 `.html` 檔案，無任何外部依賴
- JavaScript 需針對以下邏輯補上詳盡開發註解：
  1. FABRIK 反向解算
  2. 相對角度回推
  3. 角度幾何吸附（Snap）
  4. 跨越 ±π 邊界的角度 LERP 處理